<template>
	<view>
		<u-avatar :src="image" :size="size" :show-sex="showSex" :fade="fade" :sex-icon="sexIcon" :mode="mode"  v-if="type" />
		<u-image :src="image"  :height="height" :width="width" :bg-color="bgColor" :mode="imgMode" :lazy-load="lazyLoad" :border-radius="radius"  :show-loading="showLoading" v-else />
	</view>
</template>

<script>
export default {
  name: "itemImage",
  data(){
    return{
      image:'',
    }
  },
  // 具体查u-view的image文档
  props:{
    img:{
      type:String,
      default:''
    },
    mode:{
      type:String,
      default:'circle'
    },
    imgMode:{
      type:String,
      default:'aspectFill'
    },
    sexIcon:{
      type:String,
      default:'man'
    },
    showSex:{
      type:Boolean,
      default:false
    },
    size:{
      type:Number,
      default:100
    },
    height:{
      type:String | Number,
      default: ''
    },
    width:{
      type:String | Number,
      default:'100%'
    },
    bgColor:{
      type:String,
      default: '#FFFFFF'
    },
    //判断是头像还是普通的图片
    type:{
      type: String,
      default: ''
    },
    //过渡效果
    fade:{
      type:Boolean,
      default:true
    },
    showLoading:{
      type:Boolean,
      default:true
    },
    lazyLoad:{
      type:Boolean,
      default:true
    },
    radius:{
      type:String | Number,
      default:10
    },


  },
  watch:{
    img:{
      handler:function(val){
        this.image = this.imgFilter(val)
      },
    },
  },
  created() {
    this.image =  this.imgFilter(this.img)
  },
}
</script>

<style scoped>

</style>